<template lang="html">
  <div>
    <div class="search">
        <div class="input">
            <p><label>品牌名称：</label><el-input placeholder="请输入内容" v-model="ruleForm.name" ></el-input></p>
            <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
        </div>
    </div>
    <div class="add">
       <el-button type="primary" @click="add">新增</el-button>
    </div>
    <tableVue :list="list" :state="false" v-loading="ruleForm.loading" :total="total" @sizeChange="handSize">
        <slot>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="compile(scope.row)">编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  class="del"
                  @click="del(scope.row)">删除</el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
    <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false" >
        <slot>
            <el-form :model="ruleForm" ref="ruleForm" label-width="180px" class="demo-ruleForm">
                <el-form-item label="品牌中文名称(全)" prop="brandCname">
                    <el-input v-model="ruleForm.brandCname" placeholder="请输入内容"></el-input>
                 </el-form-item>
                 <el-form-item label="品牌英文名称(全)" prop="brandEname">
                     <el-input v-model="ruleForm.brandEname" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="品牌显示名称" prop="brandDisplayName">
                      <el-input v-model="ruleForm.brandDisplayName" placeholder="请输入内容"></el-input>
                   </el-form-item>
                   <el-form-item label="品牌拼音首字母" prop="letter">
                       <el-input v-model="ruleForm.letter" placeholder="请输入内容"></el-input>
                    </el-form-item>
                  <el-form-item label="品牌描述" prop="brandDesc">
                      <el-input v-model="ruleForm.brandDesc" placeholder="请输入内容"></el-input>
                   </el-form-item>
                   <el-form-item label="品牌Logo" prop="brandLogo">
                     <el-upload
                        class="upload-demo"
                        ref="upload"
                        :limit="1"
                        :action="uploadingImg"
                        :on-change="changeImgFile"
                        :http-request='custom'
                        :file-list="fileList"
                        :on-exceed="exceed"
                        list-type="picture"
                        :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="custom">上传到服务器</el-button>
                      </el-upload>
                    </el-form-item>
                    <el-form-item label="品牌官方地址" prop="brandOfficialUrl">
                        <el-input v-model="ruleForm.brandOfficialUrl" placeholder="请输入内容"></el-input>
                     </el-form-item>
                     <el-form-item label="排序" prop="brandCname">
                         <el-input v-model="ruleForm.ordinal" placeholder="请输入内容"></el-input>
                      </el-form-item>
                      <el-form-item label="是否启用" prop="isEnable">
                        <el-select v-model="ruleForm.isEnable" placeholder="请选择">
                            <el-option
                              v-for="item in Enable"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                       </el-form-item>
                       <el-form-item label="一级分类" prop="isEnable">
                         <el-select v-model="ruleForm.oneClassId" placeholder="请选择" @change="getid">
                             <el-option
                               v-for="item in oneClass"
                               :key="item.categoryId"
                               :label="item.categoryName"
                               :value="item.categoryId">
                             </el-option>
                           </el-select>
                        </el-form-item>
                        <el-form-item label="二级分类" prop="isEnable">
                          <el-select v-model="pageData.twoClassId" multiple filterable placeholder="请选择">
                              <el-option
                                v-for="item in twoClass"
                                :key="item.categoryId"
                                :label="item.categoryName"
                                :value="item.categoryId">
                              </el-option>

                            </el-select>
                         </el-form-item>
                 <el-form-item class="confirm">
                     <el-button type="primary" v-if="ruleForm.btnState=='1'" @click="upForm('post')">确定</el-button>
                     <el-button type="primary" v-if="ruleForm.btnState=='2'" @click="upForm('put')">更新</el-button>
                 </el-form-item>
            </el-form>
        </slot>
    </dialogVue>
  </div>
</template>

<script>
import Data from './brandAdminData.js'
import dialogVue from '@/components/dialog.vue'
import tableVue from '@/components/alltable.vue'
import { Base64 } from 'js-base64';
import {
  upLoadingImg
} from "@/api/shoppingCentre/shoppingCentre";
import {
    brandAdminList,
    addbrand,
    classList,
    oneClasList,
    detailsbrand,
    delbrand
} from "@/api/shoppingCentre/brandAdmin";
export default {
  components : {
    tableVue,
    dialogVue
  },
  data () {
    return JSON.parse(JSON.stringify(Data))
  },
  mounted () {
    this.getbrandAdminList();
    this.getclassList();
  },
  methods : {
    getclassList (){//一级分类
      oneClasList ().then(res=>{
        if (res.data.code == 'OK') {
          this.oneClass = res.data.data;
        }
      })
    },
    getid (id) {//二级分类
      this.pageData.twoClassId = []
      this.twoClass = [];
      this.oneClass.map(item=>{
        if (item.categoryId == id) {
            this.twoClass = item.childrens;
        }
      })
    },
    getbrandAdminList (data) {
      this.ruleForm.loading = true;
      brandAdminList(data).then(res=>{
        if (res.data.code == 'OK') {
          this.total = res.data.data.total;
          this.list.tbody = res.data.data.records.map(item=>{
             item.gmtCreate = this.switchTime(item.gmtCreate)
             item.gmtUpdate = this.switchTime(item.gmtUpdate)
             return item;
          });
          this.ruleForm.loading = false;
        }
      })
    },
    changeImgFile (file) {
        let reader = new FileReader();
        reader.readAsDataURL(file.raw);
        reader.onload =  () => {
          this.imgData.base64Str = reader.result.split(',')[1];
        }
        this.imgData.id = file.uid;
        this.imgData.fileOriginName = file.name;
        this.imgData.fileType = file.name.split('.')[1];
    },
    exceed (files, fileList) {
      this.$message.error("只能传一张图片");
    },
    custom (file) {
      this.$message({
         showClose: true,
         message: '图片正常在上传请稍后.......',
         type: 'warning'
       });
      var data = {
        base64Str : this.imgData.base64Str,
        fileOriginName : this.imgData.fileOriginName,
        fileType : this.imgData.fileType,
        id : this.imgData.id,
      }
      upLoadingImg(data).then(res=>{
        if (res.data.code == 'OK') {
            this.$message.success('上传图片成功');
            this.ruleForm.brandLogo = res.data.data.fileURL
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    add () {
      this.pageData.twoClassId = [];
      this.twoClass = [];
      this.fileList = [];
      this.ruleForm = {};

      this.dialog = true;
      this.ruleForm.btnState = '1';

    },
    compile (item) {
      this.ruleForm.categorys = [];
        this.dialog = true;

      detailsbrand(item.brandId).then(res=>{
        if (res.data.code == 'OK') {
          this.fileList = [];
          this.fileList.push({
            url : item.brandLogo,
            name : ''
          })
          this.ruleForm.categorys = res.data.data.categoryList.map(item=>{
            return item.categoryId
          })
          this.ruleForm = item
          this.ruleForm.btnState = '2';
          console.log(res);
          delete res.data.data.logicalDeletion;
        }
      })
      // this.ruleForm.categoryName = item.categoryName;
      // this.ruleForm.qualifyCategoryId = item.qualifyCategoryId;
    },
    upForm (method) {
      this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            if (this.pageData.twoClassId.length == 0) {
              this.$message.error('请选择二级分类');
              return false
            }
            var data = {
              brandCname :this.ruleForm.brandCname,
              brandEname :this.ruleForm.brandEname,
              brandDisplayName :this.ruleForm.brandDisplayName,
              letter :this.ruleForm.letter,
              brandDesc :this.ruleForm.brandDesc,
              brandLogo :this.ruleForm.brandLogo,
              brandOfficialUrl :this.ruleForm.brandOfficialUrl,
              ordinal :this.ruleForm.ordinal,
              isEnable :this.ruleForm.isEnable,
              categorys :this.pageData.twoClassId,
              brandId : this.ruleForm.brandId
            }
            console.log(data);
            // return;
            addbrand(data,method).then(res=>{
              if (res.data.code == 'OK') {
                this.getbrandAdminList();
                this.dialog = false;
                if (method == 'post') {
                    this.$message.success('新增成功');
                } else {
                    this.$message.success('编辑成功');
                }
              } else {
                this.$message.error(res.data.code);
              }
            })
          }
      })
    },
    changeData (data) {
      this.dialog = data;
    },
    search () {
      var data = {
        categoryName :this.ruleForm.name
      }
      this.getqualityClassList(data);
    },
    handSize (val) {
      var data = {
        categoryName :this.ruleForm.name,
        current :val,
        size : '10'
      }
      this.getqualityClassList(data);
    },

    del (item) {
      this.delMessage(()=>{
          var id = []
          id.push(item.brandId)
        delbrand(id).then(res=>{
          if (res.data.code == 'OK') {
            this.$message.success('删除成功');
              this.getbrandAdminList();
          } else {
            this.$message.error(res.data.message);
          }
        })
      })
    }
  }
}
</script>

<style scoped>
  @import "../../../../styles/common.css";
</style>
